<template>
  <div class="match-detail-container">
    <div class="match-detail-inner-container">
      <div class="container">
        <div class="header">
          <Header />
        </div>
        <div class="main">
          <Player />
          <div class="bottom">
            <div class="left">
              <!-- 赛事内容组件 -->
              <component :is="currentTabComponent" />
            </div>
            <div class="right">
              <!-- 数据组件 -->
              <Data />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, onUnmounted, computed } from 'vue'
import Data from './data.vue'
import Header from './header.vue'
import Player from './player.vue'
import FootballTab from './football-tab.vue'
import BasketballTab from './basketball-tab.vue'
import { useRoute } from 'vue-router'
import {
  getMatchFootballDetailAPI,
  getMatchBasketballDetailAPI,
  getMatchInfoAPI
} from '@/api/match'
import { ref, provide } from 'vue'

const route = useRoute()
const matchId = route.query.id
const matchType = route.query.type

const matchData = ref(null)

provide('matchData', matchData)

// 比赛类型配置
const MATCH_TYPES = {
  FOOTBALL: '1',
  BASKETBALL: '2',
  ESPORTS: '3' // 预留电竞类型
}

// API配置
const API_CONFIG = {
  [MATCH_TYPES.FOOTBALL]: getMatchFootballDetailAPI,
  [MATCH_TYPES.BASKETBALL]: getMatchBasketballDetailAPI,
  // [MATCH_TYPES.ESPORTS]: getMatchEsportsDetailAPI, // 未来可添加
}

// Tab组件配置
const TAB_COMPONENTS = {
  [MATCH_TYPES.FOOTBALL]: FootballTab,
  [MATCH_TYPES.BASKETBALL]: BasketballTab,
  // [MATCH_TYPES.ESPORTS]: EsportsTab, // 未来可添加
}

// 计算当前应该显示的Tab组件
const currentTabComponent = computed(() => {
  return TAB_COMPONENTS[matchType] || FootballTab // 默认显示足球Tab
})

// 修改合并数据的函数
const mergeMatchData = (detailData) => {
  return {
    ...detailData
  }
}

// 获取比赛数据的统一处理函数
const getMatchData = async () => {
  try {
    const api = API_CONFIG[matchType]
    if (!api) {
      console.error('未知的比赛类型:', matchType)
      return
    }

    const detailRes = await api({ matchId: matchId.toString() })
    
    if (detailRes.code === 200) {
      matchData.value = mergeMatchData(detailRes.data)
      console.log('比赛数据:', matchData.value)
    }
  } catch (error) {
    console.error('获取比赛数据失败:', error)
  }
}

// 修改轮询函数
let pollInterval

const startPolling = () => {
  getMatchData() // 立即执行一次
  pollInterval = setInterval(getMatchData, 5000) // 每5秒执行一次
}

const stopPolling = () => {
  if (pollInterval) {
    clearInterval(pollInterval)
  }
}

onMounted(() => {
  // startPolling()
  getMatchData()
})

onUnmounted(() => {
  stopPolling()
})

</script>
<style lang="scss" scoped>
.match-detail-container {
  width: 100%;
  // height: 100%;
  background-color: #f5f7ff;
  padding-bottom: 30px;
  .match-detail-inner-container {
    min-width: 1200px;
    min-height: 100vh;
    background-color: #f5f7ff;
  }
}
.container {
  .main {
    width: 1200px;
    margin: 0 auto;
  }
  .bottom {
    width: 1200px;
    display: flex;
    justify-content: space-between;
    .left {
      width: 854px;
    }
    .right {
      width: 334px;
    }
  }
}
</style>
